<!--  -->
<template>
  <div class="class-manage">
    <HeaderTop title="类别管理"></HeaderTop>
    <div class="class-container">
      <div class="class-btn">
        <el-button plain class="add-class" @click="append">添加类别</el-button>
      </div>
      <div class="class-main ldq-tree-div">
        <el-button
          type="primary"
          size="mini"
          plain
          @click="append"
          style="padding: 4px 32px; font-size: 13px; position: absolute; top: 15px; right: 38px">
          <i class="el-icon-plus"></i>
        </el-button>
        <el-tree
          :data="tableData"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false">
          <div class="custom-tree-node" slot-scope="{ node, data }" style="height: 40px">
            <span style="min-width: 80px">
              <span v-html="node.label"></span>
            </span>
            <div v-if="node.level == 2 || true">
              <img :src="data.picUrl" width="40" height="20">
            </div>
            <span>
              <el-button
                type="primary"
                size="mini"
                plain
                v-if="node.level < 2"
                @click="() => append(node, data)"
                style="padding: 4px 10px; font-size: 13px">
                <i class="el-icon-plus"></i>
              </el-button><el-button
                type="success"
                size="mini"
                plain
                @click="() => edit(node, data)"
                style="padding: 4px 10px; font-size: 13px">
                <i class="el-icon-edit"></i>
              </el-button>
            </span>
          </div>
        </el-tree>
      </div>
    </div>
    <Modal v-model="modal" width="500" @on-cancel="onCancel">
      <p slot="header" style="text-align:center">
        <span>添加类目</span>
      </p>
      <div style="text-align:center">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="类目名称">
            <el-input v-model="form.categoryName"></el-input>
          </el-form-item>
          <el-form-item label="类目图片">
            <UploadFileView
              v-model="form.img"
              :url="imageUrl"
              style="width: 110px; height:110px"/>
          </el-form-item>
          <p  style="color:#A6A6A6" v-if="level == 1">*图片宽度510像素 高度194像素</p>
          <p style="color:#A6A6A6" v-if="level == 2">*图片宽度130像素 高度130像素</p>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </div>
    </Modal>
  </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop.vue'
import UploadFileView from '@/components/UploadFile/UploadFileView'
// import {TreeGrid} from '../../components/treeTable'
export default {
  data () {
    return {
      columns:[
        {text:'分类名称',dataIndex:'className'},
        {text:'分类图片',dataIndex:'classImg'},
        {text:'创建时间',dataIndex:'createTime'}
      ],
      currPid: 0,
      modal: false,
      flag: false,
      level: 1,
      imageUrl:'',
      tableData:[],
      defaultProps: {
        children: 'childGoodsCategory',
        label: 'name'
      },
      form:{
        categoryName: '',
        img: ''
      }
    };
  },

  components: {
    HeaderTop,
    UploadFileView
  },

  computed: {},

  created () {
    this.getTreeList()
  },

  methods: {
    async getTreeList () {
      const params = {
        token: sessionStorage.getItem('token'),
        managerInfoId: sessionStorage.getItem('userId')
      }
      const result = await this.API.reqGetAllGoodsCategory(params)
      console.log(result.retData)
      this.tableData = result.retData
    },
    append(node, data) {
      if (data) {
        this.currPid = data.id
      }
      this.level = node.level+1
      if (!data) {
        this.level = 1
      }
      // alert(this.level)
      this.modal = true
    },
    async edit(node, data) {
      console.log(data)
      this.imageUrl = data.picUrl
      this.form.categoryName = data.name
      this.currPid = data.id
      this.modal = true
      this.flag = true
      this.level = node.level
      // alert(this.level)
    },
    async onSubmit () {
      // 新增
      if (!this.flag) {
        const formData = new FormData()
        for (let key in this.form) {
          formData.append(key, this.form[key])
        }
        formData.append('managerInfoId', sessionStorage.getItem('userId'))
        formData.append('parentId', this.currPid)
        formData.append('token', sessionStorage.getItem('token'))
        const result = await this.API.reqAddGoodsCategory(formData)
        console.log(result)
        if (result.retCode !== '000') {
          return false
        }
        this.modal = false
        this.getTreeList()
      }
      // 修改
      if (this.flag) {
        const formData = new FormData()
        formData.append('managerInfoId', sessionStorage.getItem('userId'))
        formData.append('goodsCategoryId', this.currPid)
        formData.append('imgFile', this.form.img)
        formData.append('categoryName', this.form.categoryName)
        formData.append('token', sessionStorage.getItem('token'))
        const result = await this.API.reqUpdateGoodsCategory(formData)
        console.log(result)
        if (result.retCode !== '000') {
          return false
        }
        this.modal = false
        this.getTreeList()
      }
    },
    onCancel () {
      this.currPid = 0
      this.form = {
        categoryName: '',
        img: ''
      }
      this.flag = false
    },
    handleClick(scopeRow){
      console.log(scopeRow)
    },
    // addClass(tableData){
    //   this.tableData.push({
    //     className:'女性保健',
    //     classImg:'../../assets/img/logo.png',
    //     createTime:'2018年11月11日'
    //   })
    // },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    add(){
      alert(111)
      this.modal1 = false;
    },
  }
}

</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 140px;
  height: 140px;
  display: block;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>


<style lang='stylus' scoped>
.class-manage
  height 100%
  .class-container
    height 100%
    .class-btn
      height 90px
      display flex
      align-items center
    .class-mian
      position relative
      height 763px
      .class-table
        border-top-left-radius 15px
        border-top-right-radius 15px
  .ldq-tree-div
    background-color #fff
    padding 40px 30px 30px
    position relative
    z-index 1
</style>